<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #app {
      background-color: #f9f9f9;
    }
    /* 去除默认样式 */
    html,body{
      padding: 0;
      margin: 0;
    }
    /* 框外层 */
    .mi-layout-container {
      padding-top: 50px;
      text-align: center;
    }
    /* 卡片区 */
    .mi-layout-card {
      position: relative;
      display: inline-block;
      text-align: left;
      padding: 40px 45px;
      margin: 0 auto 65px;
      width: 450px;
      border-radius: 4px;
      box-sizing: border-box;
      box-shadow: 0 20px 50px 0 hsl(0deg 0% 64% / 10%);
      background-color: #fff;
    }
    /* 右上角小角标 */
    .mi-layout-card .c-logo {
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      opacity: 0.4;
      border-radius: 4px;
      border-top: 32px solid #ff6700;
      border-right: 32px solid #ff6700;
      border-left: 32px solid transparent;
      border-bottom: 32px solid transparent;
    }
    /* 内层表 */
    .mi-layout-card .ant-tabs {
      font-size: 14px;
      width: 360px;
      position: relative;
    }
    /* 内层框第一部分上部注册区 */
    .tab-list {
      margin: 0 0 10px;
    }
    .tab-list .tab-container {
      width: 360px;
      height: 40px;
      line-height: 40px;
    }
    .tab-list .tab-container div {
      cursor: pointer;
      display: inline-block;
      height: 40px;
      line-height: 40px;
      margin-right: 20px;
      font-size: 22px;
      font-weight: 500;
      color: #bbb;
    }
    .tab-list .tab-container .active {
      color: #333;
      border-bottom: 4px solid #ff6700;
    }
    /* 内层框第二部分下部表格区 */
    .form-wrapper {
      width: 360px;
    }
    .mi-form {
      width: 360px;
    }
    .mi-form-content {
      padding: 20px 2px 0;
    }
    .mi-form-content input {
      box-sizing: border-box;
      padding-left: 20px;
      width: 354px;
      height: 60px;
      font-size: 17px;
      background-color: #f9f9f9;
      border: none;
    }
    .mi-form-content .account {
      width: 354px;
      height: 60px;
      border: 1px solid rgba(0, 0, 0, 0);
      background-color: #f9f9f9;
    }
    .mi-form-content .pwd,
    .mi-form-content .s-pwd,
    .mi-form-content .email
     {
      width: 354px;
      height: 60px;
      border: 1px solid rgba(0, 0, 0, 0);
      background-color: #f9f9f9;
      margin-top: 20px;
    }
    .mi-form-content .ctips,
    .mi-form-content .stips,
    .mi-form-content .etips,
    .mi-form-content .ptips{
      font-size: 12px;
      width: 120px;
      height: 15px;
      line-height: 15px;
    }
    .mi-form-content .t-tips {
      font-size: 12px;
      width: 160px;
      height: 15px;
      line-height: 15px;
    }
    .c-btn {
      display: inline-block;
      margin-top: 20px;
      margin-bottom: 10px;
      padding: 0 20px;
      width: 356px;
      height: 60px;
      line-height: 60px;
      background-color: #ff6700;
      color: #fff;
      opacity: .4;
      border-radius: 4px;
      border: none;
      text-align: center;
      font-size: 18px;
    }
    /* 验证码区域 */
    .mi-form-content .code{
        position: relative;
        width: 354px;
        height: 60px;
        border: 1px solid rgba(0,0,0,0);
        background-color: #f9f9f9;
        margin-top: 20px;
    }
    .mi-form-content .code input{
        box-sizing: border-box;
        padding-left: 20px;
        width: 354px;
        height: 60px;
        font-size: 17px;
        background-color: #f9f9f9;
    }
    .code .canvas {
        position: absolute;
        right: 5px;
        top: 10px;
        color: #bbb;
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        border: 1px solid #ccc;
        background-color: #e0e0e0;
        border-radius: 5px;
        cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="mi-layout-container">
      <!-- 内部卡片 -->
      <div class="mi-layout-card">
        <div class="c-logo">

        </div>
        <div class="ant-tabs">
          <div class="tab-list">
            <div class="tab-container">
              <div class="register active">注册</div>
            </div>
          </div>
          <div class="form-wrapper">
            <form class="mi-form">
              <div class="mi-form-content">
                <div class="account">
                  <input name="account" type="text" placeholder="用户名称" @blur="actest($event)">
                  <div class="ctips" ref="ctip"></div>
                </div>
                <div class="pwd">
                  <input name="pwd" type="text" placeholder="密码" @blur="ptest($event)" ref="pwd">
                  <div class="ptips" ref="ptip"></div>
                </div>
                <div class="s-pwd">
                  <input name="s-pwd" type="text" placeholder="确认密码" @blur="stest($event)">
                  <div class="stips" ref="stip"></div>
                </div>
                <div class="email">
                  <input name="email" type="text" placeholder="邮箱" @blur="etest($event)">
                  <div class="etips" ref="etip"></div>
                </div>
                <div class="code">
                  <input name="yanzheng" type="text" value="" placeholder="请输入验证码" class="input-val" />
                  <div class="canvas">获取验证码</div>
                  <div class="t-tips" ref="ttip"></div>
                </div>
                <button class="c-btn btn">注册</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 引入vue和axios -->
  <script src="../script/vue.js"></script>
  <script src="../script/axios.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        test: {
          flag1: false,
          flag2: false,
          flag3: false,
          flag4: false,
          flag5: false
        }
      },
      methods: {
        // 验证账号输入的正确性
        actest(e) {
          var account = e.target.value;
          reg = /^[a-zA-Z]\w{5,15}$/
          if(reg.test(account)){
              flag1 = true;
              this.$refs.ctip.innerHTML = "账号输入正确"
              this.$refs.ctip.style.color = "green"
          }else{
              flag1 = false;
              this.$refs.ctip.innerHTML = "账号长度应大于五位"
              this.$refs.ctip.style.color = "red"
          }
        },
        ptest(e) {
          var account = e.target.value;
          reg = /^[0-9a-zA-Z!@#$%^&*()+]{8,}$/
          if(reg.test(account)){
              flag2 = true;
              this.$refs.ptip.innerHTML = "密码输入正确"
              this.$refs.ptip.style.color = "green"
          }else{
              flag2 = false;
              this.$refs.ptip.innerHTML = "密码长度应大于八位"
              this.$refs.ptip.style.color = "red"
          }
        },
        stest(e) {
          var account = e.target.value;
          if(account === this.$refs.pwd.value){
              flag3 = true;
              this.$refs.stip.innerHTML = "密码输入正确"
              this.$refs.stip.style.color = "green"
          }else{
              flag3 = false;
              this.$refs.stip.innerHTML = "密码必须一致"
              this.$refs.stip.style.color = "red"
          }
        },
        etest(e) {
          var account = e.target.value;
          reg = /^\w+@\w+.com$/
          if(reg.test(account)){
              flag3 = true;
              this.$refs.etip.innerHTML = "邮箱输入正确"
              this.$refs.etip.style.color = "green"
          }else{
              flag3 = false;
              this.$refs.etip.innerHTML = "邮箱格式错误"
              this.$refs.etip.style.color = "red"
          }
        },
      },
    })
  </script>
</body>

</html>